<template>
	<view class="market_list">
		<uv-navbar leftIcon="arrow-leftward" leftIconColor="#FFF" placeholder autoBack bgColor="#161714">
			<template v-slot:center>
				<view class="center_slot">列表</view>
			</template>
		</uv-navbar>
		<scroll-view scroll-y class="scroll_view">
			<!-- <view class="header">
				<image :src="data_info.cover"></image>
			</view> -->
			<image :src="data_info.cover" mode="widthFix" class="cover"></image>
			<view class="content">
				<view class="name">{{data_info.name}}</view>
				<view class="data_view">
					<view class="cell">
						<view class="key">发行量</view>
						<view class="value">{{data_info.issue_all}}</view>
					</view>
					<!-- <view class="cell">
						<view class="key">未开启</view>
						<view class="value">{{not_open}}份</view>
					</view> -->
				</view>
				<view class="list">
					<view class="tabs_view">
						<view class="item_view" @click="picker_price">
							<view>{{$t('market.按价格排序')}}</view>
							<image src="@/static/images/9.png"></image>
						</view>
						<view class="item_view">
							<view>{{$t('market.按编号排序')}}</view>
							<image src="@/static/images/9.png"></image>
						</view>
					</view>
					<view class="item" v-for="item in _this.list" @click="navigate(item)">
						<view class="top">
							<view>{{item.product_name}}</view>
							<view>${{item.price}}</view>
						</view>
						<!-- <view class="bottom">
							<view>#{{item.product_number}}</view>
							<view>认证标识：384578</view>
						</view> -->
						<image src="@/static/images/r1.png" class="icon"></image>
					</view>
					<uv-load-more :status="_this.loadmore_status" line @loadmore="loadmore" />
				</view>
			</view>
		</scroll-view>
		<view class="submit">
			<view @click="submit">{{$t('home.购买')}}</view>
		</view>
	</view>
</template>

<script setup>
	import {
		orderSellInfo
	} from "@/request/api";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive,
		shallowRef
	} from "vue";
	import useBase from "@/hooks/useBase.js";
	import useList from "@/hooks/useList.js";
	const {
		router
	} = useBase();
	const {
		_this
	} = useList();

	let product_id = "";
	const not_open = ref("");

	const data_info = ref({});
	const getList = async () => {
		let data = {
			...form,
			product_id: product_id,
			page: _this.page,
			limit: _this.limit,
		}
		let {
			list,
			not_open: not_open_val,
			product
		} = await orderSellInfo(data);
		not_open.value = not_open_val;

		_this.last_page = list.last_page;
		list = list.list;
		_this.list = _this.page == 1 ? list : [..._this.list, ...list];
		_this.loadmore_status = _this.last_page == _this.page ? 'nomore' : 'loadmore';

		data_info.value = product;
	};
	const loadmore = () => {
		if (_this.page >= _this.last_page) return;
		_this.page++;
		getList();
	};
	const form = {
		price_sort: "asc"
	}
	const picker_price = () => {
		form.price_sort = form.price_sort == "asc" ? "desc" : "asc";
		_this.page = 1;
		_this.list = [];
		getList();
	};

	let type = '';
	onLoad(options => {
		product_id = options.id;
		type = options.type;
		getList();
	});

	const navigate = (item) => {
		let id = item.id;
		let url = '/pages/market/deta?id=' + id;
		if (type == 2) {
			url = `/pages/market/blind_box_deta?id=${id}`;
		}
		router(url);
	};
	const submit = () => {
		if (!_this.list.length) {
			uni.$uv.toast("暂无数据");
			return false;
		}
		navigate(_this.list[0]);
	};
</script>

<style scoped lang="scss">
	$footerHeight: 108rpx;

	.market_list {
		height: 100vh;
		overflow: hidden;

		.center_slot {
			color: #FFFFFF;
			font-size: 14px;
			font-weight: 800;
		}

		.scroll_view {
			height: calc(100vh - #{$navBarHeight} - #{$footerHeight});

			.header {
				width: 100%;
				height: 400rpx;
				background: url(@/static/images/h1.png) no-repeat;
				background-size: 100% 100%;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 272rpx;
					height: 224rpx;
				}
			}
			.cover {
				width: 100%;
			}

			.content {
				padding: 0 30rpx;
				box-sizing: border-box;

				.name {
					text-align: center;
					color: #DDF247;
					font-size: 40rpx;
					font-weight: 800;
					padding-top: 38rpx;
					padding-bottom: 30rpx;
					box-sizing: border-box;
				}

				.data_view {
					height: 150rpx;
					border-radius: 10rpx;
					padding: 30rpx 0 0 40rpx;
					box-sizing: border-box;
					background: rgba(255, 255, 255, 0.1);
					display: flex;

					.cell {
						width: 50%;

						.key {
							color: #808080;
							font-size: 26rpx;
							padding-bottom: 20rpx;
							box-sizing: border-box;
						}

						.value {
							color: #FFFFFF;
							font-size: 40rpx;
							font-family: DINPro;
						}
					}
				}

				.list {
					border-radius: 10rpx;
					margin-top: 30rpx;
					padding: 30rpx 30rpx 50rpx;
					box-sizing: border-box;
					background: rgba(255, 255, 255, 0.1);

					.tabs_view {
						height: 50rpx;
						margin-bottom: 30rpx;
						box-sizing: border-box;
						display: flex;

						.item_view {
							width: 210rpx;
							height: 50rpx;
							border-radius: 5rpx;
							margin-right: 30rpx;
							border: 1px solid #CCCCCC;
							padding: 0 20rpx;
							box-sizing: border-box;
							display: flex;
							align-items: center;
							justify-content: space-between;

							view {
								flex: 1;
								color: #CCCCCC;
								font-size: 24rpx;
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
								padding: 0 4rpx;
								box-sizing: border-box;
							}

							image {
								width: 20rpx;
								height: 20rpx;
							}
						}
					}

					.item {
						border-bottom: 1px solid #444444;
						padding: 36rpx 40rpx 36rpx 10rpx;
						box-sizing: border-box;
						position: relative;

						.top {
							color: #FFFFFF;
							font-size: 28rpx;
							// padding-bottom: 20rpx;
							box-sizing: border-box;
							display: flex;
							justify-content: space-between;
						}

						.bottom {
							color: #808080;
							font-size: 26rpx;
							display: flex;
							justify-content: space-between;
						}

						.icon {
							width: 20rpx;
							height: 20rpx;
							position: absolute;
							right: -7rpx;
							top: 50%;
							transform: translateY(-50%);
							z-index: 2;
						}
					}
				}
			}
		}

		.submit {
			height: $footerHeight;
			padding: 10rpx 35rpx;
			box-sizing: border-box;

			view {
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				color: #111111;
				font-size: 28rpx;
				font-weight: bold;
				border-radius: 20rpx;
				background: #DDF247;
			}
		}
	}
</style>